<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        EMS4J
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="images/icon/ems.ico" type="image/x-icon" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="style/index.css" media="all">
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css" media="all">
    <script type="text/javascript">
        function checkUsername(o) {
            if (!o || o.value == '') {$('#div_u').addClass('key2');}
            else{$('#div_u').removeClass('key2');}
        }

        function checkPassword(o){
            if (!o || o.value == '') {
//                o.type = 'text';o.style.marginTop = '.0em';o.style.marginBottom = '2em';
                $('#div_p').addClass('key');
            }
            else{$('#div_p').removeClass('key');}
        }

    </script>
</head>
<body>
<h3>Employee Manager Service</h3>
<div class="login-form">
    <!--<div class="close"> </div>-->
    <!--<div class="head-info">-->
        <!--<label class="lbl-1"> </label>-->
        <!--<label class="lbl-2"> </label>-->
        <!--<label class="lbl-3"> </label>-->
    <!--</div>-->
    <div class="clear"> </div>
    <!--<div class="avtar">-->
        <!--<img src="images/avtar.png" />-->
    <!--</div>-->
    <form method="post">
        <div  id="div_u">
            <input type="text" class="text" name="username" id="username" placeholder="手机号/邮箱"
                   onblur="checkUsername(this)" >
        </div>
        <div  id="div_p" style="height: 120px">
            <input type="password"  name="password" id="password" placeholder="登录密码"
                    onblur="checkPassword(this)">
        </div>
    </form>
    <div class="signin">
        <input type="submit" value="登录" id="submitBtn">
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="plugins/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
    /*点击*/
    $('#submitBtn').click(function () {
        var username = $('input[name="username"]').val();
        if(username == ''){
            checkUsername();
            return false;
        }
        var password = $('input[name="password"]').val();
        if (password == ''){
            checkPassword();
            return false;
        }
        $.ajax({
            url:'/ems4j/login',
            data:{username:username,password:password},
            type:'post',
            success:function (data) {
                if (data == 0){
                    $('#msgContent').html("登录成功！");
                    $('#myModal').modal("show");
                    setTimeout(function () {
                        $('#myModal').modal("hide");
                        $('#msgContent').html("");
                        window.location.href = "html/welcome.html";
                    },500);
                }else if (data == -1){
                    $('#msgContent').html("用户信息输入有误！");
                    $('#myModal').modal("show");
                    setTimeout(function () {
                        $('#myModal').modal("hide");
                        $('#msgContent').html("");
                    },1000);
                }else if(data == 1){
                    $('#msgContent').html("用户不存在！");
                    $('#myModal').modal("show");
                    setTimeout(function () {
                        $('#myModal').modal("hide");
                        $('#msgContent').html("");
                    },1000);
                }else if(data == 2){
                    $('#msgContent').html("密码错误！");
                    $('#myModal').modal("show");
                    setTimeout(function () {
                        $('#myModal').modal("hide");
                        $('#msgContent').html("");
                    },1000);
                }
            },
            error:function () {
                console.log("error");
            }
        });
    });
    /*回车*/
    $('#submitBtn,#username,#password').keydown(function (event) {
        if (event.keyCode == 13){
            $('#submitBtn').click();
        }
    });
});

</script>


<div class="modal fade" id="myModal"  role="dialog" style="margin-top: 10%">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header" >
                <h4 class="modal-title" id="myModalLabel">提示信息</h4>
            </div>
            <div class="modal-body" id="msgContent" ></div>
        </div>
    </div>
</div>
</body>
</html>